<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>VXE</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="vxe-pc-ui-4.4.4/lib/style.min.css">
    <link rel="stylesheet" href="vxe-table-4.11.8/lib/style.min.css">
    <!-- 引入vue -->
    <script src="vue-3.4.27/vue.global.prod.js"></script>
    <!-- 引入组件 -->
    <script src="xe-utils-3.7.4/dist/xe-utils.umd.min.js"></script>
    <script src="vxe-pc-ui-4.4.4/lib/index.umd.min.js"></script>
    <script src="vxe-table-4.11.8/lib/index.umd.min.js"></script>
    <!--jquery-->
    <script src="jquery-3.7.1/dist/jquery.min.js"></script>
</head>
<body style="height: 100vh; width: 100vw; margin: 0; padding: 0;">
<div id="app" style="height: 100vh; width: 100vw;">
    <vxe-form v-bind="formOptions" @submit="submitEvent" @reset="resetEvent"></vxe-form>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
<script>
    (function () {
        var App = {
            data () {
                const formOptions = {
                    items: [
                        { field: 'name', title: '名称', itemRender: { name: 'VxeInput' } },
                        { field: 'sex', title: '性别', itemRender: { name: 'VxeInput' } },
                        { field: 'age', title: '年龄', itemRender: { name: 'VxeInput' } },
                        {
                            itemRender: {
                                name: 'VxeButtonGroup',
                                options: [
                                    { type: 'submit', content: '提交', status: 'primary' },
                                    { type: 'reset', content: '重置' }
                                ]
                            }
                        }
                    ],
                    data: {}
                }
                const gridOptions = {
                    height: 800,
                    pagerConfig: {
                        total: 0,
                        currentPage: 1,
                        pageSize: 10,
                        layouts: ['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']
                    },
                    columns: [
                        { type: 'seq', width: 70 },
                        { field: 'companyCode', title: 'companyCode'},
                        { field: 'installAddress', title: 'installAddress'},
                    ],
                    data: []
                }
                return {
                    formOptions,gridOptions
                }
            },
            created () {
                this.gridOptions.loading = true;
                this.handlePageData();
            },
            methods: {
                handlePageData () {
                    const self = this; // 保存 this 的引用
                    $.post("/cfsDataNbTemp/list", {}, function(res) {
                        console.log(res.data);
                        self.gridOptions.pagerConfig.total = res.total
                        self.gridOptions.data = res.data.records;
                        self.gridOptions.loading = false;
                    });
                },
                pageChangeEvent ({ pageSize, currentPage }) {
                    this.gridOptions.pagerConfig.currentPage = currentPage
                    this.gridOptions.pagerConfig.pageSize = pageSize
                    this.handlePageData()
                },
                submitEvent () {
                    console.log(this.formOptions.data);
                    VxeUI.modal.message({ content: '保存成功', status: 'success' })
                }
            }
        }
        Vue.createApp(App).use(VxeUI).use(VXETable).mount('#app')
    })()
</script>
</body>
</html>